<!--
 * @Author: Vi卡农
 * @Date: 2020-04-02 12:34:51
 * @LastEditTime: 2020-04-02 15:07:13
 * @Description: --房源公共池
 * @FilePath: \cshf_admin\src\views\modules\resource\resourcehouse.vue
 -->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-house__houseinfo">
      <el-form :inline="true" :model="dataForm">
        <el-row>
          <el-col :span="19">
            <el-form-item>
              类型：
              <ren-select
                v-model="dataForm.houseType"
                dict-type="houseType"
                class="FormSelect"
                clearable
              ></ren-select>
            </el-form-item>
            <el-form-item>
              交易：
              <ren-select
                v-model="dataForm.transactionType"
                dict-type="houseTransactionType"
                class="FormSelect"
                clearable
              ></ren-select>
            </el-form-item>
            <el-form-item>
              区域：
              <el-select
                v-model="dataForm.districtCode"
                placeholder="请选择"
                clearable
                @change="CityRegionChange"
                class="FormSelect"
              >
                <el-option
                  v-for="item in this.$store.state.CityRegion"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              商圈：
              <el-select
                v-model="dataForm.business"
                placeholder="请选择"
                :disabled="dataForm.districtCode==''"
                class="FormSelect"
                clearable
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              楼盘类型：
              <ren-select
                v-model="dataForm.type"
                dict-type="dictType"
                placeholder="楼盘类型"
                class="FormSelect"
                clearable
              ></ren-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            智能：
            <el-input v-model="dataForm.name" placeholder="楼盘名" style="width:30%" clearable></el-input>
            <el-input
              placeholder="请输入内容"
              v-model="dataForm.search"
              class="input-with-select"
              @keyup.enter.native="getDataList"
              clearable
              style="width:50%"
            >
              <el-button slot="append" icon="el-icon-search" @click="getDataList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              单价：
              <el-input v-model="dataForm.prices" placeholder="最低价" class="Section_inp" clearable></el-input>
              {{' -'}}
              <el-input v-model="dataForm.pricee" placeholder="最高价" class="Section_inp" clearable></el-input>
            </el-form-item>
            <el-form-item>
              总价：
              <el-input v-model="dataForm.pricess" placeholder="最低价" class="Section_inp" clearable></el-input>
              {{' -'}}
              <el-input v-model="dataForm.pricese" placeholder="最高价" class="Section_inp" clearable></el-input>
            </el-form-item>
            <el-form-item>
              面积：
              <el-input v-model="dataForm.areas" placeholder="最小" class="Section_inp" clearable></el-input>
              {{' -'}}
              <el-input v-model="dataForm.areae" placeholder="最大" class="Section_inp" clearable></el-input>
            </el-form-item>
            <el-form-item>
              楼层：
              <el-input
                v-model="dataForm.storeyCoordinates"
                placeholder="低楼层"
                class="Section_inp"
                clearable
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.storeyCoordinatee"
                placeholder="高楼层"
                class="Section_inp"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="Reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%;"
        border
        stripe
        :height="autoTabHeight"
        highlight-current-row
        @row-click="tableRowClick"
        @row-dblclick="tableRowDbclick"
        @sort-change="dataListSortChangeHandle"
      >
      <el-table-column type="expand">
          <template slot-scope="props">
            <div class="houseinfoFollow">
              <el-card class="box-card FY_details" shadow="hover">
                <el-row>
                  <el-col :span="24">
                    <el-table :data="FollowTableData" class="FY_table_gj" max-height="150">
                      <el-table-column prop="content" label="跟进内容"></el-table-column>
                      <el-table-column prop="creatorName" label="跟进人" width="120"></el-table-column>
                      <el-table-column prop="deptName" label="跟进部门" width="120"></el-table-column>
                      <el-table-column prop="createDate" label="跟进时间" width="150"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="编号" header-align="center" align="center" width="100">
          <template slot-scope="scope">{{"FY - "+scope.row.id.substring(scope.row.id.length-6)}}</template>
        </el-table-column>
        <el-table-column prop="houseType" label="类型" header-align="center" align="center">
          <template slot-scope="scope">{{ $getDictLabel("houseType", scope.row.houseType) }}</template>
        </el-table-column>
        <el-table-column
          prop="key"
          label="钥匙"
          header-align="center"
          align="center"
          width="70"
          sortable="custom"
        >
          <template slot-scope="scope">
            <svg
              :class="scope.row.key!=null&&scope.row.key.toString()=='1'?'icon-svg svgColor1':'icon-svg svgColor2'"
              aria-hidden="true"
            >
              <use xlink:href="#key" />
            </svg>
          </template>
        </el-table-column>
        <el-table-column
          prop="image"
          label="图片"
          header-align="center"
          align="center"
          width="70"
          sortable="custom"
        >
          <template slot-scope="scope">
            <svg
              :class="scope.row.image!=null&&scope.row.image.toString()=='1'?'icon-svg svgColor1 images_icon':'icon-svg svgColor2 images_icon'"
              aria-hidden="true"
            >
              <use xlink:href="#images" />
            </svg>
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionType"
          label="交易"
          header-align="center"
          align="center"
          width="70"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span
              :class="scope.row.transactionType==1?'typeColor1':'typeColor2'"
            >{{ $getDictLabel("houseTransactionType", scope.row.transactionType).slice(0,1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="districtCode"
          label="商圈区域"
          header-align="center"
          align="center"
          width="130"
        >
          <template
            slot-scope="scope"
          >{{ $Dictionaries("CityRegion", scope.row.districtCode) }} - {{ $Dictionaries("BusinessPage", scope.row.business) }}</template>
        </el-table-column>
        <el-table-column
          prop="dictName"
          label="楼盘"
          header-align="center"
          align="center"
          width="130"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span class="font_weight">{{scope.row.dictName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zdNum"
          label="座栋"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template slot-scope="scope">{{scope.row.zdNum+' '+scope.row.zdUnit}}</template>
        </el-table-column>
        <el-table-column
          prop="dyNum"
          label="单元"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template slot-scope="scope">{{scope.row.dyNum+'单元'}}</template>
        </el-table-column>
        <!-- <el-table-column
                    prop="dictName"
                    label="楼盘字典"
                    header-align="center"
                    align="center"
                    width="180"
                >
                    <template
                        slot-scope="scope"
                    >{{ scope.row.dictName+' '+scope.row.zdNum+scope.row.zdUnit+' '+scope.row.dyNum+'单元 '+scope.row.num}}</template>
        </el-table-column>-->
        <el-table-column
          prop="num"
          label="房号"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="area"
          label="面积（㎡）"
          header-align="center"
          align="center"
          width="110"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          header-align="center"
          align="center"
          width="90"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.price"
            >{{ scope.row.transactionType==0?scope.row.price+' 元':scope.row.price+' 元/㎡'}}</span>
            <span v-else>{{ scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="prices"
          label="总价"
          header-align="center"
          align="center"
          width="90"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.prices"
            >{{ scope.row.transactionType==0?scope.row.prices+' 万元':scope.row.prices+' 元/月'}}</span>
            <span v-else>{{ scope.row.prices}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="renovation"
          label="装修"
          header-align="center"
          align="center"
          sortable="custom"
        >
          <template slot-scope="scope">{{ $getDictLabel("dictRenovation", scope.row.renovation) }}</template>
        </el-table-column>

        <el-table-column
          prop="furniture"
          label="家具"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template
            slot-scope="scope"
          >{{scope.row.furniture!=null&&scope.row.furniture.toString()=='1'?'有':'无'}}</template>
        </el-table-column>
        <el-table-column prop="type" label="类型" header-align="center" align="center" width="60">
          <!-- <template slot-scope="scope">{{$getDictLabel("dictType", scope.row.type)}}</template> -->
          <template slot-scope="scope">
            <span
              :style="dictTypeColor(scope.row.type)"
            >{{ $getDictLabel("dictType", scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sortType"
          label="房源归类"
          header-align="center"
          align="center"
          sortable="custom"
          width="96"
        >
          <template slot-scope="scope">
            <span>{{ $getDictLabel("houseSortType", scope.row.sortType) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lookMode"
          label="看房"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template slot-scope="scope">{{$getDictLabel("dictLookMode", scope.row.lookMode)}}</template>
        </el-table-column>
        <el-table-column
          prop="situation"
          label="现状"
          header-align="center"
          align="center"
          sortable="custom"
          width="80"
        >
          <template slot-scope="scope">{{$getDictLabel("dictSituation", scope.row.situation)}}</template>
        </el-table-column>
        <el-table-column
          prop="source"
          label="来源"
          header-align="center"
          align="center"
          sortable="custom"
          width="80"
        >
          <template slot-scope="scope">{{$getDictLabel("houseSource", scope.row.source)}}</template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          header-align="center"
          align="center"
          sortable="custom"
          width="80"
        >
          <template slot-scope="scope">{{$getDictLabel("dictState", scope.row.state)}}</template>
        </el-table-column>
        <el-table-column
          prop="maintainName"
          label="维护人"
          header-align="center"
          align="center"
          sortable="custom"
          width="96"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          label="录入时间"
          header-align="center"
          align="center"
          width="100"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{scope.row.createDate?scope.row.createDate.substring(0,10):scope.row.createDate}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="followTime"
          label="最新跟进"
          header-align="center"
          align="center"
          width="100"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{scope.row.followTime?scope.row.followTime.substring(0,10):scope.row.followTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="60"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getResourceHouse(scope.row)">拾取</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div style="height:200px;"></div> -->
      <div class="paginationBox">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div>
      <!-- <div class="houseinfoFollow" v-if="FollowDrawer">
        <el-card class="box-card FY_details" shadow="hover">
          <el-table :data="FollowTableData" class="FY_table_gj" max-height="150">
            <el-table-column prop="content" label="跟进内容"></el-table-column>
            <el-table-column prop="creatorName" label="跟进人" width="120"></el-table-column>
            <el-table-column prop="deptName" label="跟进部门" width="120"></el-table-column>
            <el-table-column prop="createDate" label="跟进时间" width="150"></el-table-column>
          </el-table>
        </el-card>
      </div> -->

      <!-- <el-pagination
        :current-page="page2"
        :page-sizes="[5,10, 20, 50, 100]"
        :page-size="limit2"
        :total="total2"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle2"
        @current-change="pageCurrentChangeHandle2"
      ></el-pagination>-->

      <!-- 弹窗, 新增 / 修改 -->
      <!-- <component v-if="addOruUpdate" :is="zjName" @CloseDialog="CloseDialogFun"></component> -->
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/resource/resourcehouse/page",
        getDataListIsPage: true
      },
      MaintainType: false,
      dataForm: {
        id: this.$route.query.moduleId ? this.$route.query.moduleId : "",
        dictId: this.$route.query.dictId ? this.$route.query.dictId : "",
        dictName: "",
        houseType: "", //房源类型
        transactionType: this.$route.query.transactionType
          ? this.$route.query.transactionType
          : "", //交易类型
        examine: "", //审核状态
        districtCode: "", //行政区域
        business: "", //商圈
        deptId: "", //部门
        type: "", //楼盘类型
        prices: "",
        pricee: "",
        pricess: "",
        pricese: "",
        areas: "",
        areae: "",
        self: "1",
        state: "1",
        search: "",
        name: "",
        storeyCoordinates: "",
        storeyCoordinatee: ""
      },
      limit: 20,
      businessList: [],
      select_type: "1",
      OwnerInfoForm: {
        ownerName: "",
        ownerCompanyName: "",
        ownerLeaseName: "",
        ownerClientName: ""
      },
      FollowTableData: [],
      page2: 1, // 当前页码
      limit2: 50, // 每页数
      total2: 0, // 总条数
      FollowTableForm: {
        id: ""
      },
      addOruUpdate: false,
      addUrl: "",
      autoWidthVal: "",
      autoTabHeight: 700,
      FollowDrawer: false,
      maintainList: this.$store.state.maintainList
    };
  },
  computed: {
    zjName: {
      get: function() {
        this.addUrl;
        var myComponent = () => import(`${this.addUrl}`);
        return myComponent;
      }
    }
  },
  created() {
    this.autoWidth();
  },
  mounted() {
    let _this = this;
    window.onresize = function() {
      _this.autoWidth();
    };
  },
  methods: {
    autoWidth() {
      let w = document.documentElement.clientWidth || document.body.clientWidth;
      let h =
        document.documentElement.clientHeight || document.body.clientHeight;
      // this.autoWidthVal = w - 290 + "px";
      if (w < 1740 && w > 1610) {
        this.autoTabHeight = h - 340;
      } else if (w < 1610) {
        this.autoTabHeight = h - 370;
      } else {
        this.autoTabHeight = h - 280;
      }
    },
    //行政区选择change
    CityRegionChange(val) {
      this.businessList = [];
      this.dataForm.business = "";
      this.$http
        .get(`/dictionary/business/businessList`, {
          params: {
            districtCode: val
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.businessList = res.data;
        })
        .catch(() => {});
    },
    Reset() {
      this.dataForm = {
        id: "",
        name: "",
        houseType: "", //房源类型
        transactionType: "", //交易类型
        dictId: this.$route.query.dictId ? this.$route.query.dictId : "",
        examine: "", //审核状态
        districtCode: "", //行政区域
        business: "", //商圈
        type: "", //楼盘类型
        prices: "",
        pricee: "",
        pricess: "",
        pricese: "",
        areas: "",
        areae: "",
        self: "1",
        state: "1",
        search: "",
        name: "",
        storeyCoordinates: "",
        storeyCoordinatee: ""
      };
    },
    //行单击
   tableRowClick(row) {
      // if (this.FollowDrawer == false) {
      //   this.FollowDrawer = true;
      // } else {
      //   this.FollowDrawer = false;
      // }
      this.FollowTableForm = row;
      this.getFjOwnerInfo();
      this.getPageFollow();
    },
    //行双击
    // tableRowDbclick(row) {
    //   if (this.dataForm.self == "0") {
    //     sessionStorage.setItem("MaintainType", "true");
    //   } else {
    //     sessionStorage.setItem("MaintainType", "false");
    //   }
    //   this.$router.push({
    //     name: "HousingPages",
    //     query: {
    //       ID: row.id,
    //       transactionType: row.transactionType,
    //       type: row.type
    //     }
    //   });
    // },

    //获取房源跟进记录
    getPageFollow() {
      let _this = this;
      this.$http
        .get(`/resource/resourcehouse/pageFollow`, {
          params: {
            page: 1,
            limit: 50,
            id: _this.FollowTableForm.id
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.FollowTableData = res.data.list;
        })
        .catch(() => {});
    },
    // 分页, 每页条数
    pageSizeChangeHandle2(val) {
      this.page2 = 1;
      this.limit2 = val;
      this.getPageFollow();
    },
    // 分页, 当前页
    pageCurrentChangeHandle2(val) {
      this.page2 = val;
      this.getPageFollow();
    },
    //拾取
    getResourceHouse(row) {
      let _this = this;
      this.$http
        .put(
          "/resource/resourcehouse/getResourceHouse",
          {},
          {
            params: {
              houseId: row.id
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("成功！");
        })
        .catch(() => {});
    }
  },
  watch: {
    dataForm: {
      handler(nowVal, oldVal) {
        this.getDataList();
      },
      deep: true
    },
    dataList: {
      handler(nowVal, oldVal) {
        if (nowVal.length > 0) {
          this.FollowTableForm = nowVal[0];
          this.getPageFollow();
        }
      }
      // deep: true
    },
    $route(to, from) {
      if (to.name == "house-houseinfo") {
        if (this.$route.query.dictId) {
          this.dataForm.dictId = this.$route.query.dictId;
          this.dataForm.transactionType = this.$route.query.transactionType;
          this.getDataList();
        } else if (this.$route.query.moduleId) {
          this.dataForm.id = this.$route.query.moduleId;
          this.dataForm.state = "";
        } else {
          this.dataForm.dictId = "";
          this.dataForm.transactionType = "";
          this.getDataList();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 10px;
}
.lp_card_bh {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.FY_details {
  font-weight: 600;
  color: #333333;
  ul {
    width: 90%;
    list-style: none;
    margin: 0px;
    padding: 0;
    // margin-top: 10px;
    border-right: 1px solid #e6e6e6;
    li {
      margin-top: 18px;
    }
  }
  .el-card__body {
    padding: 0px;
  }
}

.images_icon {
  width: 18px;
  height: 18px;
}
// 租
.typeColor1 {
  color: rgb(0, 171, 255);
}
// 售
.typeColor2 {
  color: red;
}
.houseinfoFollow {
  width: 1500px;
  // position: fixed;
  // bottom: 0;
  // right: 0;
  // z-index: 1300;
}
</style>